<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>商品详情</title>
		<meta name="description" content="智慧社区商城app" />
		<meta name="Keywords" content="智慧社区商城app" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="location" content="province=;city=;coord=" />
		<link rel="apple-touch-icon-precomposed" href="images/screenLogo.png" />
		<link rel="stylesheet" type="text/css" href="css/m2015.css" />
		<link rel="stylesheet" href="css/swiper.min.css" />
		<script src="js/jquery.min.js" type="text/javascript"></script>
		<script src="js/jquery.touchslider.min.js">
		</script>
		<script src="js/main.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/MapWrapper.min.js"></script>
		<script src="js/swiper.min.js"></script>
		<style>
			.pro_pz dl dt {
				line-height: 30px;
			}
			
			.smstip {
				background: #fff;
				display: none;
				left: 0;
				padding: 10px 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 99;
			}
			
			.smstip h3 {
				font-size: 14px;
				line-height: 40px;
				margin: 0 10px;
			}
			
			.smstip .inputbox {
				margin-bottom: 10px;
			}
			
			.smstip .inputbox input {
				border: solid 1px #ccc;
				height: 30px;
				text-indent: 5px;
				width: 100%;
			}
			
			.smstip .inputbox p {
				margin-bottom: 10px;
			}
			
			.smstip .inputbox p input {
				margin: 0 5px;
				width: 100px;
			}
			
			.smstip .inputbox button {
				background: #ec6f61;
				border: 0;
				border-radius: 3px;
				color: #fff;
				height: 30px;
				margin-top: 10px;
				width: 100%;
			}
			
			.que {
				background: #dadada;
				color: #333;
				display: block;
				width: auto;
			}
			
			footer {
				padding-bottom: 70px;
			}
			
			.mark {
				position: fixed;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, .5);
				width: 100%;
				height: 100%;
				z-index: 98;
				display: none;
			}
			
			.close {
				background: #f44623;
				border: 0 none;
				border-radius: 100%;
				color: #fff;
				display: block;
				float: right;
				height: 30px;
				line-height: 30px;
				margin: 0;
				margin-right: 10px;
				padding: 0;
				text-align: center;
				width: 30px;
			}
			
			.btn_box {
				z-index: 9;
				padding: 0;
				height: 60px;
			}
			.buycarerNormal {
				display: inline-block;
				width: 40px;
				height: 50px;
				line-height: 25px;
				text-align: center;
			}
			
			.liji_buy,.add_cart {
				width: 50%;
				display: inline-block;
				height: 60px;
				text-align: center;
				line-height: 60px;
				color: #fff;
				margin: 0;
				border-radius: 0;
			}
			
			a.liji_buy.left {
				float: right;
			}
			
			.btn_box a {
				margin: 0;
			}
			
			.btn_box .buycarerNormal {
				display: inline-block;
				width: 40px;
				height: 40px;
				line-height: 25px;
				text-align: center;
				margin: 10px 6px 0 6px;
			}
			
			.add_cart {
				background-color: #f4a425;
			}
			
			.m_img {
				text-align: center;
			}
			
			.m_addr {
				padding: 5px;
				padding-bottom: 10px;
			}
			
			.yansep {
				clear: both;
				font-size: 12px;
				padding-bottom: 10px;
			}
			
			.fly-img {
				display: block;
				width: 30px;
				height: 30px;
				border-radius: 100%;
				position: fixed;
				z-index: 9999;
				background: #f60;
			}
			
			.myfavico {
				width: 34px;
				height: 30px;
				background: url(images/favico.png) no-repeat 0 0;
				display: inline-block;
			}
			
			.myfavico2 {
				width: 34px;
				height: 30px;
				background: url(images/favico.png) no-repeat -34px 0;
				display: inline-block;
			}
			
			.pro_cx p a {
				margin: 5px 0;
				color: #f4a425;
			}
			
			.constrast-btn {
				position: absolute;
				display: block;
				width: 40px;
				height: 40px;
				right: 10px;
				bottom: 10px;
				text-align: center;
				line-height: 20px;
				background: rgba(255, 255, 255, .3);
				color: #aaa;
				font-size: 12px;
				border: solid 1px #eee;
				border-radius: 5px;
				z-index: 9999;
			}
			
			.constrast-btn i {
				color: #f44623;
				font-size: 16px;
				line-height: 14px;
				margin-top: 6px;
				display: block;
			}
			.sjfwshow a.active{
				background: #45a1de;
				color: #fff;
			}
		</style>
	</head>

	<body>
		<header id="header" style="">
			<div class="topbar">
				<a href="javascript:history.back();" class="back_btn"><i class="iconfont">ş</i></a>
				<a href="javascript:;" class="top_home"><i class="iconfont">ƙ</i></a>
				<h1 class="page_title">西湖牌杭白菊桐乡 菊花茶 </h1>
			</div>
			<div class="home_menu" id="hMenu">
				<a href="index.html"><i class="go_index"></i><span>首页</span></a>
				<a href="goods_cat.html"><i class="go_fenlei"></i><span>商品分类</span></a>
				<a href="cart.html"><i class="go_cart"></i><span>购物车</span></a>
				<a href="member_addr.html"><i class="go_me"></i><span>收货地址</span></a>
			</div>
		</header>
		<script type="text/javascript">
			//title右上角隐藏菜单
			$(".top_home").click(function() {
				var target = $(".home_menu");
				if(target.slideToggle) {
					target.slideToggle()
				} else {
					target.toggle()
				}
			});
		</script>
		
		<div class="product" style="position:relative;">
			<!--swiper轮播-->
			<div class="swiper-container" id="bigImg" style="height: 100%;">
				<div class="swiper-wrapper pro_img_box"  id="pro_img">
					<div class="swiper-slide">
				    	<img src="images/goods_detail/tj.jpg" />
				    </div>
				    <div class="swiper-slide">
				    	<img src="images/goods_detail/tj2.jpg" />
				    </div>
				    <div class="swiper-slide">
				    	<img src="images/goods_detail/tj3.jpg" />
				    </div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
			
			<!--<a href="javascript:;" class="constrast-btn" onclick="constrast.addProduct(36170,'香奈儿 邂逅清新香水','images/cart/mm.jpg',2)"><i>PK</i>对比</a>-->
		</div>
		
		<div class="pro_tit border_bottom">
			<h2>西湖牌杭白菊桐乡胎菊50g*3罐 菊花茶 </h2>
			<h3>【西湖牌好茶购】G20杭州峰会用茶，更多2017新茶提前囤！热辣好茶优惠享不停！快来跟小智同学一起囤茶去！！</h3>
			<p>
				<b id="now_price">￥59.00</b>
				<del>￥199.00</del>
				<a href="javascript:;"><i id="myfavbtn" class="iconfont myfavico"></i></a>
			</p>
		</div>
		
		<div class="pro_cx">
			<p>
				<a href="javascript:;"><span>[积分]</span>社区方便购物还享积分大奖</a>
			</p>
			<p>
				<a href="javascript:;"><span>[优惠购]</span>购买组合套餐，最高省50.00元 &gt;</a>
			</p>
			<p><span>[享便捷]</span> 家政服务、停车服务... <b style="color: #f44623;">￥49元起</b>
				<a href="javascript:;" style="border: 0; color: #45a1de; margin-left: 10px;">立刻办理</a>
			</p>
		</div>
		
		
		<div class="pro_pz">
			<dl class="yanse yanse1">
				<dt>规　　格：</dt>
				<dd>
					<a href="javascript:;" class="cur">50g*3罐</a>
					<a href="javascript:;" class="">100g*3罐</a>
					<a href="javascript:;" class="">150g*3罐</a>
				</dd>
			</dl>
			<dl class="yanse">
				<dt>数　　量：</dt>
				<dd>
					<div class="minus num_btn">-</div>
					<input type="number" class="num_input" value="1" min="1" max="99"/>
					<div class="add num_btn">+</div>
				</dd>
			</dl>
			<!--<dl class="yanse">
				<dt>规　　格：</dt>
				<dd>
					<a href="javascript:;" class="cur">50g*3罐</a>
					<a href="javascript:;" class="">100g*3罐</a>
				</dd>
			</dl>-->
		</div>
		
		
		<div class="pro_kc">
			<dl class="yanse">
				<dt>配 送 至：</dt>
				<dd>
					<p class="select_city" id="ps_city"> 
						<span class="site">晶城秀府小区10号楼4-703
							<!--<select id="ps_sheng">
								<option value="53">陕西省</option>
								<option value="52">贵州省</option>
								<option value="51">四川省</option>
								<option value="50">重庆市</option>
								<option value="21">辽宁省</option> 
							</select> 
						</span>
						<span>
							<select id="ps_shi"> 
								<option value="53">陕西省</option> 
								<option value="52">贵州省</option> 
								<option value="51">四川省</option> 
								<option value="50">重庆市</option> 
								<option value="21">辽宁省</option> 
							</select> 
						</span> 
						<span>
							<select id="ps_xian"> 
								<option value="53">陕西省</option> 
								<option value="52">贵州省</option> 
								<option value="51">四川省</option> 
								<option value="50">重庆市</option> 
								<option value="21">辽宁省</option> 
							</select>-->
						</span>
						<span class="switch">切换</span>
					</p>
					<p class="ps_zt"><span>全场商品即买即送，实体店品质保证，请放心购买！</span></p>
				</dd>
			</dl>
			<!--<dl id="lblShop" class="yanse">
				<dt>门店库存：</dt>
				<dd>
					<span class="kucun"> <span>雁塔区(<em id="lblProductKcStateShop"></em>)</span></span>
					<a href="javascript:;">切换城市</a>
					<div class="kc_show" id="kcState_">
						<div style="position: relative;">
							<a id="kc_close"><i class="iconfont">&szlig;</i></a>
						</div>
						<div id="transPort"></div>
						<div id="kcAreaList">
							<h5>门店库存</h5>
							<ul id="lblShopList"></ul>
						</div>
					</div>
					<a>测试测试</a>
					<p class="yansep"><span>全场包邮配送，实体店正品保证，请放心购买！</span></p>
				</dd>
			</dl>-->
			<dl class="fuwu">
				<dt>支持服务：</dt>
				<dd>
					<a style="" id="sxsId" href="javascript:;" target="_blank">3小时内极速达</a>
					<a style="" id="sjkdId" href="javascript:;" target="_blank">店面配送</a>
					<a style="" id="kuaidiId" href="javascript:;" target="_blank">到店自取</a>
					<a style="" id="jiajiId" href="javascript:;" target="_blank">无忧退换</a>
					<a id="fqfk" href="javascript:;" style="background: #f60;">分期付款</a>
				</dd>
			</dl>
			<dl id="_service" class="yanse">
				<dt>热门服务：</dt>
				<dd id="services_">
					<a href="javascript:;" id="show_sjfw">选择增值服务<i class="iconfont" style="font-size: 12px; margin-left: 5px;">ƕ</i></a>
					<a href="javascript:;" id="hide_sjfw" style="display: none;">收起<i class="iconfont" style="font-size: 12px; margin-left: 5px;">Ɣ</i></a>
					<a href="javascript:;" >详情</a>
					<div class="sjfwshow" style="display: none;">
						<a href="javascript:void(0)" >家庭保洁 活动特惠1月 <b class="red1">￥49</b></a>
						<a href="javascript:void(0)" >停车服务 1年 <b class="red1">￥599</b></a>
						<a href="javascript:void(0)" >房屋中介 活动特惠1月 <b class="red1">￥169</b></a>
						<a href="javascript:void(0)" >婴幼儿护理 1月 <b class="red1">￥369</b></a>
					</div>
				</dd>
			</dl>
		</div>
		
		<div class="btn_box border_top" style="">
			<div style="float:left; width:108px; overflow:hidden;">
				<a href="tel:17702929112" class="buycarerNormal" style="position: relative; display:block; float:left;"> 
					<img src="images/de_kefu.png" width="20" height="20" style="display: block; margin: 0 auto;" /> 
					<span style="font-size: 12px; color: #2c3e50; display: block; width: 40px; height: 25px;">客服</span> 
				</a>
				<a id="mybuycarer" href="cart.html" class="buycarerNormal" style="position:relative; display:block; float:left;"> 
					<em style="position: absolute; top: -5px; right: 0; background: #f44623; color: #fff; display: block; height: 14px; line-height: 13px; padding: 0 3px; border-radius: 14px; display: block; font-size: 12px;" id="cartCount">2</em> 
					<img src="images/de_gouwuche.png" width="20" height="20" style="display: block; margin: 0 auto;" /> 
					<span style="font-size: 12px; color: #2c3e50; display:block; width: 40px; height: 25px;">购物车</span> 
				</a>
			</div>
			<div style="margin-left:112px;">
				<a href="cart.html" onclick="" class="liji_buy left">立即购买</a>
				<a href="index.html" onclick="" class="add_cart" style="float:right;">再去逛逛</a>
			</div>
		</div>
		
		
		<div id="_peijian" class="d_peijian">
			<h4>大家还购买了</h4>
			<div class="pj_box">
				<ul>
					<li>
						<a href="/product/14901.html"><img src="images/goods_detail/20150708112159605.jpg" width="80" height="80" alt="img" /><em>Plantronics 缤特力 Marque 2 M165 音乐蓝牙耳机</em><b>￥240.00</b></a>
					</li>
					<li>
						<a href="/product/24769.html"><img src="images/goods_detail/20150910052509882.jpg" width="80" height="80" alt="img" /><em>吾爱 蜗牛单声道 蓝牙耳机 增强版</em><b>￥240.00</b></a>
					</li>
					<li>
						<a href="/product/24769.html"><img src="images/goods_detail/biao.jpg" width="80" height="80" alt="img" /><em>吾爱 蜗牛单声道 蓝牙耳机 增强版</em><b>￥240.00</b></a>
					</li>
					<li>
						<a href="/product/24769.html"><img src="images/goods_detail/chanel.jpg" width="80" height="80" alt="img" /><em>吾爱 蜗牛单声道 蓝牙耳机 增强版</em><b>￥240.00</b></a>
					</li>
					<li>
						<a href="/product/24769.html"><img src="images/goods_detail/milk.jpg" width="80" height="80" alt="img" /><em>吾爱 蜗牛单声道 蓝牙耳机 增强版</em><b>￥240.00</b></a>
					</li>
					<li>
						<a href="/product/24769.html"><img src="images/goods_detail/tbh.jpg" width="80" height="80" alt="img" /><em>吾爱 蜗牛单声道 蓝牙耳机 增强版</em><b>￥240.00</b></a>
					</li>
					<li>
						<a href="/product/24769.html"><img src="images/goods_detail/tj.jpg" width="80" height="80" alt="img" /><em>吾爱 蜗牛单声道 蓝牙耳机 增强版</em><b>￥240.00</b></a>
					</li>
					<li>
						<a href="/product/24769.html"><img src="images/goods_detail/yg.jpg" width="80" height="80" alt="img" /><em>吾爱 蜗牛单声道 蓝牙耳机 增强版</em><b>￥240.00</b></a>
					</li>
					
				</ul>
			</div>
		</div>
		
		<div class="jb_canshu">
			<h4>商品介绍 </h4>
			<ul>
				<li>商品名称：西湖牌杭白菊桐乡胎菊50g*3罐</li>
				<li>商品编号：1815213215</li>
				<li>店铺： 西湖茶业旗舰店</li>
				<li>商品毛重：0.6kg</li>
				<li>是否含糖：无糖</li>
				<li>等级：特级</li>
				<li>国产产地：其它</li>
				<li>适用季节：秋季</li>
				<li>分类：菊花茶</li>
				<li>包装：独立包装</li>
				<li>包装单位：罐装</li>
				<li>采摘时间：雨前</li>
				<li>生长季节：春季</li>
				<li></li>
			</ul>
		</div>
		
		<!--<div class="detail_pgmenu border_top" style="">
			<a href="javascript:;">详细参数<i class="iconfont">ƒ</i></a>
			<a href="javascript:;">图文详情<em>建议在wifi环境使用</em><i class="iconfont">ƒ</i></a>
			<a href="javascript:;" style="display:block">相关评测<span>(6)</span><i class="iconfont">ƒ</i></a>
			<a href="javascript:;" style="">相关配件<span>(14)</span><i class="iconfont">ƒ</i></a>
			<a href="javascript:;">维修配件<span>(0)</span><i class="iconfont">ƒ</i></a>
			<a href="javascript:;:;">购买咨询<span>(5)</span><i class="iconfont">ƒ</i></a>
			<a href="javascript:;">使用心得<span>(5)</span><i class="iconfont">ƒ</i></a>
		</div>-->
		
		<!--<script src="js/constrast.js" type="text/javascript"></script>-->
		
		<!--<footer id="footer" style="">
				<div class="footbar" id="noLogin" style="display: none;">
					<a id="f1_btnLogin" href="javascript:;" class="login_btn">登录</a>
					<a href="javascript:;">注册</a>
					<a href="javascript:;" class="backtop_btn">↑回顶部</a>
				</div>
				<div class="footbar" id="yesLogin" style="display: block">
					<a class="login_btn" href="javascript:;" id="txtUsername">Kevin</a>
					<a onClick="">退出</a>
					<a href="javascript:;" class="backtop_btn">↑回顶部</a>
				</div>
				
				<p class="footlink">Copyright©&nbsp;易凯信息技术有限公司
					<a style="margin:0 0 0 10px;" id="_tousu" href="tousu.html">投诉建议</a>
				</p>
		</footer>-->
		<script>
			
			//底部按钮-回到顶部
//			$(".backtop_btn").click(function(){
//				$(window).scrollTop(0);
//				return false;
//			})
			
			$(".pj_box ul").css({
				width: 100 * $(".pj_box ul li").length
			});
			
			//增值服务展开
			$("#show_sjfw").click(function() {
				$(".sjfwshow").toggle();
				$(this).hide();
				$("#hide_sjfw").removeClass("cur").show();
			});
			
			//增值服务收起
			$("#hide_sjfw").click(function() {
				$(".sjfwshow").toggle();
				$(this).hide();
				$("#show_sjfw").removeClass("cur").show();
			});
			
			//增值服务里面a标签点击选中
			$(".sjfwshow a").click(function(){
				console.log(this)
				if($(this).hasClass("active")){
					$(this).removeClass("active")
				}else{
					$(this).addClass("active")
				}
			})
			
			
			//点击爱心
			$('#myfavbtn').click(function(){
        		if($(this).hasClass("myfavico")){
        			$(this).removeClass("myfavico").addClass("myfavico2");
        		}else{
        			$(this).addClass("myfavico");
        			$(this).removeClass("myfavico2");
        		};
			});
			
			
//			$(".kucun").click(function() {
//				$(".kc_show").show();
//				$(this).addClass("kucuncur");
//			});
//			
//			$("#kc_close").click(function() {
//				$(".kc_show").hide();
//				$(".kucun").removeClass("kucuncur");
//			});			
			
			var mySwiper = new Swiper('.swiper-container', {
				autoplay: 5000,//可选选项，自动滑动
				pagination : '.swiper-pagination',
				loop : true,
			})
			
			$(".yanse1 a").click(function(){
				$(this).addClass("cur").siblings().removeClass("cur")
			})
			
			//增减商品数量
			$(".minus").click(function(){
				if($('.num_input').val() <= 1){
					alert("购买数量不能小于1个")
				}else{
					var value = parseInt($('.num_input').val()) - 1;
        			$('.num_input').val(value);
				}
			})
			$(".add").click(function(){
				if($('.num_input').val() >= 99){
					alert("购买数量不能大于99个")
				}else{
					var value = parseInt($('.num_input').val()) + 1;
        			$('.num_input').val(value);
				}
			})
			
			//切换收货地址
			$(".switch").click(function(){
				location.href = "member_addr.html";
			})
			
		</script>
	</body>
</html>